<template>
	<view class = "address">
		<view class="header">
			<image @tap = "backMine" src="../../../../assets/images/arr-l.png" mode=""></image>
			<text>地址列表</text>	
		</view>
		<view class="addressinfo" v-for = "item in list" :key = "item.id" @tap="toPay(item.id)">
			<view class="left">
				<text>姓名:{{ item.name }}</text>
				<text>地址:{{ item.cityStr }}</text>
				<text>联系方式:{{ item.tel }}</text>
			</view>
			
			<view class="right">
				<text @tap = "edit(item.id)">修改</text>
				<text @tap = "del(item.id)">删除</text>
			</view>
		</view>
		
		<view class="footer" @tap = "address">
			新增地址
		</view>
		
	</view>
</template>

<script>
	import http from "../../../../utils/http.js"
	export default {
		data() {
			return {
				id:'',
				list:'',
				// Id:'',
				cityStr:''
			};
		},
		onLoad(){
			this.userInfo = JSON.parse(uni.getStorageSync("token"));
			// console.log(this.userInfo);
			this.id = this.userInfo.id;
			console.log(this.id);
			http.get("/api/leju/front/address/list",{
				userId:this.id
			}).then(res=>{
				console.log(res);
				this.list = res.data.data;
				console.log(this.list);
				
			})
			
			
		},
		methods:{
			toPay(id) {
				if(id){
					var addressList=this.list.find(item => item.id = id);
					uni.setStorageSync("address",addressList);
					uni.navigateTo({
						url:'/pages/kind/notPay/notPay'
					})
				}
			},
			backMine(){
				uni.switchTab({
					url:"../../mine"
				})
			},
			address(){
				uni.navigateTo({
					url:"/pages/mine/address/addAddress/addAddress"
				})
			},
			del(val){
				uni.showModal({
					title: '删除地址',
					content: '删除后不能恢复，您确定要删除',
					success: function (res) {
						if (res.confirm) {
							http.get("/api/leju/front/address/del",{
								id:val
							}).then(res=>{
								console.log(res);
								uni.showToast({
									title:"已删除"
								})
								//强制刷新,删除后不会自动从页面消失，需要强制刷新。
								uni.navigateBack()
							})
						} else if (res.cancel) {
							console.log('取消删除');
						}
					}
				});	
			},
			edit(val){
				uni.navigateTo({
					url:'../addAddress/addAddress?id='+val
				})
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		background:wheat;
	}
	.address{
		width:750rpx;
		// height: 100vh;
		background:wheat;
		.header{
			width:100%;
			height: 80rpx;
			background: #5D4E49;
			padding:0.1rpx;
			image{
				position:absolute;
				left:33rpx;
				top:28rpx;
				width:24px;
				height: 38rpx;
			}
			text{
				display:block;
				width:200rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align:center;
				font-weight:bolder;
				color:white;
				margin:0 auto;
				margin-top:20rpx;
				font-size:40rpx;
			}
		}
		.addressinfo{
			width:600rpx;
			height: 150rpx;
			margin:20rpx auto;
			border-radius:20rpx;
			background-color: gray;
			color:yellow;
			display:flex;
			align-items: center;
			justify-content: space-around;
			
		}
		.left{
			width:400rpx;
			height: 100rpx;
			// display:flex;
			text{
				display:block;
				font-size:12rpx;
			}
		}
		.right{
			width:100rpx;
			display:flex;
			justify-content: space-between;
		}
		
		
		.footer{
			position: fixed;
			bottom:40rpx;
			left:125rpx;
			width:500rpx;
			height: 80rpx;
			text-align:center;
			line-height: 80rpx;
			background-color: #5D4E49;
			color:white;
			font-weight:bolder;
			border-radius: 80rpx;
		}
	}
</style>
